/**
 * @fileOverview 基于jquery节点封装的视图基类
 * @author goodzsq@gmail.com
 */
var BaseClass = gg.module('ui.jq.Component');

module.exports = gg.createClass({
    attributes: {
        layout: {
            defaultValue: 'absolute',
            label: '布局',
            type: 'datatype.String',
            setter: function(v) {
                this.defaultSetter('layout', v);
                this.layout = gg.module('ui.jq.layout.' + v);
            }
        },
        html: {
            type: 'datatype.String',
            setter: function(v) {
                var container = this.el.find('>.content');
                if (container.length === 0) {
                    container = this._buildHtml({class: 'content'});
                    this.el.append(container);
                }
                container.html(v);
            }
        },
        children: {
            label: '子组件',
            type: 'datatype.Array',
            order: Infinity,
            defaultValue: [],
            setter: function(v) {
                if (typeof this.children !== 'array') {
                    this.children = [];
                } else {
                    this.children.length = 0;
                }
                for (var i = 0; i < v.length; i++) {
                    this.addChild(v[i]);
                }
            },
            getter: function() {
                return this.children;
            }
        }
    },
    methods: {
        /**
         * @override
         */
        createElement: function() {
            var css = 'ui ui-container';
            this.el = this._buildHtml({id: this.cid, class: css});
        },
        /**
         * 添加子元素
         * @param {Object} attr 子对象
         * @param {Number} at 插入位置，若未设置则插入到最后
         */
        addChild: function(attr, at) {
            var child = gg.object(attr, this);
            this.applyAttr('children', 'add', child, at);
            if (at == null) {
                at = this.children.length - 1;
            }
            this.trigger('onAddChild', child, at);
            this.listenTo(child, 'destroy', function(obj) {
                this.removeChild(obj);
            });
            //add html
            var anchorEl = this.el.children('.ui').eq(at);
            if (anchorEl.length === 1) {
                anchorEl.before(child.el);
            } else {
                this.el.append(child.el);
            }
            //do layout
            this.layout.add.call(this, child, at);
        },
        /**
         * 移除子元素
         * @param {Object} obj 待移除的子元素
         */
        removeChild: function(obj) {
            var at = _.indexOf(this.children, obj);
            this.removeChildAt(at);
        },
        /**
         * 移除指定位置元素
         * @param {Number} at 指定位置
         */
        removeChildAt: function(at) {
            var child = this.children[at];
            console.log('removechild', child.cid);
            child.parent = null;
            this.children.splice(at, 1);
            this.trigger('onRemoveChild', child, at);
            //remove html
            var removedContainer = $('<div id="_removedContainer" style="display:none">');
            if (removedContainer.length === 0) {
                $('body').append(removedContainer);
            }
            removedContainer.append(child.el);
        },
        /**
         * @override
         */
        destroy: function() {
            var child;
            while (child = this.children.pop()) {
                child.destroy();
            }
            BaseClass.prototype.destroy.call(this);
        }
    },
    events: {

    }
}, BaseClass, ['Container']);

/** @fileend */